<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="主页demo/js/jquery-3.6.0.min.js"></script>
		<script src="./js/layui/layui.js"></script>
		<link rel="stylesheet" href="./js/layui/css/layui.css" />
		<link rel="stylesheet"  href="css/base.css"/>
		<style>
			.main{
				width: 300px;
				height: 20px;
				border-radius:8px;  
				border: 1px solid red;
			}
			.main-in{
				height: 100%;
				border: 1px solid red;
				background-color: red;
				border-radius:8px 0px 0px 8px; 
				width: 0px;
			}
			button{
				width: 50px;
				height: 50px;
				background-color: #00FFFF;
			}
			.num{
				text-align: center;width: 50px;
				height: 50px;line-height: 50px
			}
		</style>
	</head>
	<body>
		
		<div class="main">
			<div class="main-in"></div>
		</div>
		
		<button class="add">+</button>
		<div  class="num">0</div>
		<button class="dec">-</button>
		<script>
			$(function(){
				//加一按钮
				let totle=346;
				$(".add").click(function(){
					if(parseInt($(".num").text())==346){
						
					}else{
						let num=parseInt($(".num").text())+1;
						$(".num").text(num)
						let width=num/346*100;
						$(".main-in").css({
							"width":width+"%"
						})
					}
				
				})
				//减一按钮
				$(".dec").click(function(){
					if(parseInt($(".num").text())==0){
						
					}else{
						let num=parseInt($(".num").text())-1;
							$(".num").text(parseInt(num))
							let width=num/346*100;
							$(".main-in").css({
								"width":width+"%"
							})
					}
				})
				
				
			})
		</script>
	</body>
</html>
